<template>
  <header class="clearfix"   style="position:relative" >
    <div class="header" :class="check">
      <div class="logo">
        <div class="box">
          <div class="imgBoxs">
            <img :src="loginImg"/>
          </div>
        </div>
      </div>
      <el-popover
      ref="popover5"
      placement="top"
      width="100"
      trigger="hover"
      v-model="visible2">
      <div style="text-align: center; margin: 0;padding: 10px 0px">
      <p class="add"  @click="goPage('work','http://www.lanwanlogistics.com')"> 运踪宝</p>
      </div>
      </el-popover>
      <div class="nave">
        <!--<el-popover-->
          <!--ref="popover5"-->
          <!--placement="top"-->
          <!--width="160"-->
          <!--v-model="visible2">-->
          <!--<p>这是一段内容这是一段内容确定删除吗？</p>-->
          <!--<div style="text-align: right; margin: 0">-->
            <!--<p  @click="goPage('work','http://192.168.1.111:6080/')"> 运踪宝</p>-->
          <!--</div>-->
        <!--</el-popover>-->
        <p>
          <span class="indexPage"  style="padding: 10px .44rem; margin-left: .39rem" :class="{'check':check=='index'}" @click="goPage('index')">首页</span>
          <span class="workPage" :class="{'check':check=='work'}" @click="goPage('work')" style="margin-left: .25rem;">业务介绍</span>
          <!--<span class="upPage"  v-popover:popover5 style="position:relative;"  >增值业务</span>-->
          <span class="cominPage" :class="{'check':check=='company'}" style="" @click="goPage('company')">关于我们</span>
        </p>
      </div>
      <div class="us">
        <p><span class=""> <img :src="phoneIonc" class="iocnImg"/>  </span><span >联系电话 </span> <span style="color:#fc8c00;font-weight: bold"> 0755-2398 7252</span> </p>
      </div>
      <div class="cleae"></div>
    </div>
  </header>
</template>
<style scoped>
  /*基础 中文样式*/
  .map .logo{border-bottom: 1px solid #ccc;height: .99rem;max-height: 75px}
  .logo{float: left;width:35%;max-width:565px; height: 1rem;border-bottom: 0px none;cursor: pointer;background: #fff;overflow: hidden}
  .box{width: 75%;height:.46rem; position: relative;left: 50%;top: 50% }
  .logo .imgBoxs{width: 80%;height:.46rem;position: absolute; left: -50%;top: -50% }
  .logo .imgBoxs img{width: 100%;margin: auto;}
  .add:hover{background-color: #0062a2;color: #fff}
  .add{cursor: pointer; font-size: 16px;color: #0062a2;}
  p{max-height: 75px}
  .nave{float: left;width:45%;height: .98rem;max-height: 75px;border-bottom: 0px none;background: #0061a1 ;}
 .us{position: absolute;right: .4rem; width:17.8%;max-width:336px;min-width: 271px; height: .98rem;max-height: 75px;border-bottom: 0px none;background: #0061a1 ;}
 .header{background: #0061a1;height: 1rem;overflow: hidden;max-height: 75px}
 .nave p {text-align:left;font-size: 18px;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;max-height: 75px}
  .nave .check{background: #fff;color:#0062a2;}
  .nave  span:hover{background: #fff;color:#0062a2;cursor: pointer}
  .nave  span {text-align: center; color:#fff;line-height:1rem; padding:10px 23px;font-size: 16px;font-weight: 500;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .us  span{text-align: center; color:rgb(250, 250, 250);font-weight: 500;line-height:1rem;font-size: 16px;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .us .icon-phone{border:2px solid #f1f1f1;border-radius: .4rem;padding:.07rem .04rem .07rem .03rem;height:.2rem;line-height:.2rem;margin-right:.1rem;font-size: .2rem}
  .icon-phone img{width: .3rem;position: relative;top: .09rem;left: .02rem}
  .logo p{text-align: center; color:rgb(255, 208, 75);font-weight: bold;line-height: 1rem}
  .iocnImg{position: relative;width: .48rem;top: 10px;right: 10px}
  /**英文样式覆盖**/
  /*.English .EnglishLogoText{ font-size: 14px;text-indent: 10px}*/
  /*.English  .navBox{ width: auto; margin-left: 30px;}*/
  /*.English  .red{ left: 30px;width: 120px}*/
  /*.English .transport .red{ left: 30px;width: 98px}*/
  /*.English .histroy .red{ left: 158px;width: 80px}*/
  /*.English .create .red{ left: 267px;width: 212px}*/
  /*.English .chart   .red {left: 20px;display: block}*/
  /*.English .Histroy   .red {left: 140px;display: block}*/
  /*.English .creatOder   .red {left: 250px;width: 250px;display: block}*/
  .code {width: 1rem; height: 1rem;border: 1px solid #e1e1e1;}
  .code img {max-width:100%}
  @media only screen and (min-width: 1200px){
    .nave span{font-size: 14px}
    .us  span{font-size:14px}
    .iocnImg{width: 30px;top: 10px;right: 10px}
    .upPage{margin-left: .35rem}
    .cominPage{margin-left: .35rem  }
  }
  @media only screen and (min-width: 1400px){
    .us  span{font-size: 14px}
    .nave span{font-size:14px;}
    .iocnImg{width: 40px;top: 10px;right: 10px}
    .upPage{margin-left: .45rem}
    .cominPage{margin-left: .45rem  }
  }
  @media only screen and (min-width: 1600px){
    .us  span{font-size: 17px}
    .nave span{font-size: 17px}
    .iocnImg{width:45px;top: 15px;right: 10px}
    .upPage{margin-left: .55rem}
    .cominPage{margin-left: .55rem  }
  }
  @media only screen and (min-width: 1920px){
    .us  span{font-size: 17px;line-height: 75px}
    .nave span{font-size: 17px;line-height: 75px}
    .iocnImg{width: 48px;top: 18px;right: 10px}
    .upPage{margin-left: .55rem}
    .cominPage{margin-left: .55rem  }
  }


</style>
<script>
  import { mapState, mapActions } from 'vuex'
  import Public from '../../vuex/public.js'
  import loginImg from '../../../static/img/icon/logo180.png'
  // import android from '../../../static/img/android.jpg'
  import phoneIdex from '../../../static/img/phoneIdex.png'
  import pushIocn from '../../../static/img/icon/push.png'
  import phoneIonc from '../../../static/img/phoneIonc.png'
  export default {
    name: 'my-header',
    created () {
      // 展开侧栏
      this.$store.commit('naveTo', true)
     // 查看本页面路由 绑定对应页面class
      this.check = this.$route.name;
      if(this.check== 'map'){
        this.$store.commit('naveTo', false)
      }
      var usr = sessionStorage.getItem('user');
      if(usr) {
        usr = JSON.parse(usr);
        if(usr.type == 0){
         // this.$router.push({ name: 'AdminConfig' })
        }
      }else {
        if(this.check != 'login'){
            // this.$router.push({ name: 'AdminConfig' })
        }
      }
    },
    data () {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        loginImg:loginImg,
        visible2:false,
        phoneIdex:phoneIdex,
        pushIocn:pushIocn,
        phoneIonc:phoneIonc
      }
    },
    methods: {
      ...mapActions({
        lognOutPost: 'loginOutFn'
      }),
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },

      goPage (name,a) {
        if(a){
          window.open(a)
        }
          this.$router.push({name: name})
      },
      //  语言切换
      languageCheng (parm) {
        this.show = !this.show
        if (parm) {
          Public.publicLo.sessionStorageSav('Language',parm)
          this.$store.commit('updateLanguage', parm)
        }
      },
      //
      goAdmin(){
          var test = window.location.href
          this.$router.push({ name: 'adminDavise' })
          //window.open('/adminDavise','_self')
      },
      // 退出
      loginOut (id) {
        var parm = ''
        this.lognOutPost(parm)
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      }
    },
    computed: {
      languageData: function () {
        var parm = this.language;
        if (parm) {
            if (parm.check == 'Chinese') {
              parm = parm.Chinese;
            }
            if(parm.check == 'English') {
              parm = parm.English;
            }
        }
        return parm
      },
     updateStatusData: function () {
       var parm = this.updateStatus;
       if (parm == 'out') {
         // 没记住密码保存空 localStorage
         Public.publicLo.sessionStorageSav('token', '');
         Public.publicLo.sessionStorageSav('user', '');
         // 清空所有数据
         this.$store.commit('loginOut', null);
         this.$router.push({ name: 'login' });
         // this.lognOutPost(this.user)
       }
       if (parm == 'outErorr') {
         Public.publicLo.sessionStorageSav('token', '');
         Public.publicLo.sessionStorageSav('user', '');
         // 清空所有数据
         this.$store.commit('loginOut', null);
         this.$router.push({ name: 'login' })
       }
       return 1
     },
      ...mapState([
        'nav',
        'language',
        'updateStatus'
      ])
    },
    mounted () {

    }
  }
</script>

